<template>
  <div class="date-time-picker">
    <n-date-picker
      v-if="showDate"
      v-model:value="dateValue"
      :clearable="clearable"
      :placeholder="datePlaceholder"
      :disabled="disabled"
      :disabled-date="disabledDate"
      @update:value="handleDateChange"
      class="date-picker"
    />
    
    <n-time-picker
      v-if="showTime"
      v-model:value="timeValue"
      :clearable="clearable"
      :placeholder="timePlaceholder"
      :disabled="disabled"
      @update:value="handleTimeChange"
      class="time-picker"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { NDatePicker, NTimePicker } from 'naive-ui';
import { formatToDateTime } from '@/utils/dateUtil';

interface DateTimePickerProps {
  // 日期时间值
  value?: number | null;
  // 是否显示日期选择器
  showDate?: boolean;
  // 是否显示时间选择器
  showTime?: boolean;
  // 是否可清空
  clearable?: boolean;
  // 是否禁用
  disabled?: boolean;
  // 日期占位符
  datePlaceholder?: string;
  // 时间占位符
  timePlaceholder?: string;
  // 禁用日期的函数
  disabledDate?: (current: number) => boolean;
  // 格式化字符串
  format?: string;
}

interface DateTimePickerEmits {
  (e: 'update:value', value: number | null): void;
  (e: 'change', value: number | null): void;
}

const props = withDefaults(defineProps<DateTimePickerProps>(), {
  value: null,
  showDate: true,
  showTime: true,
  clearable: true,
  disabled: false,
  datePlaceholder: '选择日期',
  timePlaceholder: '选择时间',
  disabledDate: undefined,
  format: 'yyyy-MM-dd HH:mm:ss'
});

const emit = defineEmits<DateTimePickerEmits>();

// 日期和时间的值
const dateValue = ref<number | null>(null);
const timeValue = ref<number | null>(null);

// 初始化和同步props.value到内部状态
const syncValues = () => {
  if (props.value) {
    const date = new Date(props.value);
    if (props.showDate) {
      // 只保留年月日信息
      const year = date.getFullYear();
      const month = date.getMonth();
      const day = date.getDate();
      dateValue.value = new Date(year, month, day).getTime();
    }
    if (props.showTime) {
      // 只保留时分秒信息
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      timeValue.value = hours * 3600000 + minutes * 60000 + seconds * 1000;
    }
  } else {
    dateValue.value = null;
    timeValue.value = null;
  }
};

// 初始化值
watch(
  () => props.value,
  () => {
    syncValues();
  },
  { immediate: true }
);

// 合并日期和时间为完整的时间戳
const combinedValue = computed(() => {
  if (!props.showDate && !props.showTime) return null;
  
  if (props.showDate && props.showTime) {
    if (!dateValue.value || !timeValue.value) return null;
    
    const date = new Date(dateValue.value);
    const time = timeValue.value;
    
    // 提取日期部分的年月日
    const year = date.getFullYear();
    const month = date.getMonth();
    const day = date.getDate();
    
    // 提取时间部分的时分秒
    const hours = Math.floor(time / 3600000);
    const minutes = Math.floor((time % 3600000) / 60000);
    const seconds = Math.floor((time % 60000) / 1000);
    
    return new Date(year, month, day, hours, minutes, seconds).getTime();
  } else if (props.showDate) {
    return dateValue.value;
  } else {
    // 只显示时间的情况，使用今天的日期加上所选时间
    if (!timeValue.value) return null;
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const day = today.getDate();
    const hours = Math.floor(timeValue.value / 3600000);
    const minutes = Math.floor((timeValue.value % 3600000) / 60000);
    const seconds = Math.floor((timeValue.value % 60000) / 1000);
    return new Date(year, month, day, hours, minutes, seconds).getTime();
  }
});

// 监听combinedValue的变化，触发update:value和change事件
watch(combinedValue, (newValue) => {
  emit('update:value', newValue);
  emit('change', newValue);
});

// 处理日期变化
const handleDateChange = (value: number | null) => {
  dateValue.value = value;
};

// 处理时间变化
const handleTimeChange = (value: number | null) => {
  timeValue.value = value;
};
</script>

<style lang="less" scoped>
.date-time-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .date-picker,
  .time-picker {
    width: 100%;
  }
}
</style>